<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input @keyup.enter.native="handleFilter" style="width: 260px;" class="filter-item"
                      placeholder="请输入查询信息" v-model="query.keyword">
            </el-input>
            <el-button class="filter-item" v-waves type="primary" icon="el-icon-search" @click="handleFilter" >查询</el-button>
            <el-button class="filter-item" @click="showEditDialog(0)" style="margin-left: 0" type="primary" icon="el-icon-edit"> 添加
            </el-button>
        </div>
        <template>
            <el-table
                :data="tableList.items"
                v-loading="stateManager.listLoading"
                border
                fit
                highlight-current-row
                style="width: 100%;min-height:800px;"
            >
                <el-table-column
                    prop="id"
                    label="ID"
                    align="center" width="65"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="角色名称"
                    align="center"
                >
                </el-table-column>
                <el-table-column label="操作" width="230"    align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showEditDialog(scope.row.id)" type="success"
                                   v-waves
                                   icon="el-icon-edit-outline"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete"
                                   v-waves
                                   @click="handleDelete(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    background
                    layout="prev, pager, next,total"
                    :page-size="15"
                    :total="list.total"
                    @current-change="handleCurrentChange"
                    :current-page="list.currentPage">
                </el-pagination>
            </div>

        </template>
        <el-dialog :stateManager="stateManager"></el-dialog>
    </div>
</template>
<script>
  import _dialog from './_dialog.vue'
  import waves from '@/directive/waves' // Waves directive
  export default {
    name: 'role',
    components: {
      'el-dialog': _dialog
    },
    directives: { waves },
    data: function () {
      return {
        stateManager: {
          refreshList: true,
          editDialogVisible: false,
          editModelId: null,
          listLoading: true,
          buttonLoading: false,
        },
        query: {
          keyword: '',
          page: 1
        },
        list: this.$listDataSource({
          url: '/api/role'
        }),
        model: this.$modelDataSource({
          url: '/api/role',
          dataKey: 'model',
          attributes: {
            id: '',
          }
        }),
        currentPage: 1,
      }
    },
    created () {
      this.$store.commit('app/setPageTitle', '权限管理')
      this.$store.dispatch('permission/fetchPermission')
    },
    methods: {
      showEditDialog: function (id) {
        this.stateManager.editDialogVisible = true
        this.stateManager.editModelId = id
      },
      handleFilter () {
        this.query.page = 1
        this.stateManager.refreshList = true
      },
      // 翻页
      handleCurrentChange (val) {
        this.currentPage = val
        this.query.page = val
        this.stateManager.refreshList = true
      },
      handleDelete (id) {
        let self = this
        this.$confirm('是否删除此项？', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          title: '删除确认'
        }).then(() => {
          self.model.uuid = id
          self.model.destroy(function () {
            self.stateManager.refreshList = true
            self.$message.success( '删除成功')
          })
        }).catch((res) => {
          self.$message.info('删除失败')
        })
      },
    },
    computed: {
      tableList () {
        let self = this
        if (this.stateManager.refreshList) {
          this.stateManager.listLoading = true
          this.list.fetch(self.query, function () {
            self.stateManager.refreshList = false
            self.stateManager.listLoading = false
          })
        }
        return this.list
      }
    }
  }
</script>
